<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .Topbox {
        width: 200px;
        height: 50px;
        background: red;
    }

    .tiele {
        width: 200px;
        height: 30px;
        border: 1px solid;
        position: absolute;
        line-height: 30px;
        text-align: center;
    }

    .Topbox1 {
        width: 200px;
        height: 30px;
        border: 1px solid;
        line-height: 30px;
        text-align: center;
        margin-top: 700px;
    }
</style>

<body>
    <div class="tiele" style="display: none;">我是文字</div>
    <div class='Topbox'>这个是上面 </div>
    <div class='Topbox1'>这个是下面</div>
</body>
<script>
    //上方盒子的移入事件
    document.querySelector('.Topbox').onmouseover = () => {
        // 目标盒子的左边距
        /**
         * +60是因为要不会重叠 获取到的是原div的坐标
         */
        document.querySelector('.tiele').style.top = document.querySelector('.Topbox').getBoundingClientRect().top + 60 + 'px'
        /**
         * 目标盒子的右边距
        */
        document.querySelector('.tiele').style.left = document.querySelector('.Topbox1').getBoundingClientRect().left
        document.querySelector('.tiele').style.display ='block'
    }
      // 上方盒子的移出事件
    document.querySelector('.Topbox').onmouseout  = () => {
        document.querySelector('.tiele').style.display ='none'
    }
     // 下方盒子的移入事件
    document.querySelector('.Topbox1').onmouseover = ($event) => {
        // 这个获取的是鼠标的坐标没有用到
        console.log($event)
        console.log(document.querySelector('.Topbox1'))
         // 目标盒子的左边距
        /**
         * -40是因为要不会重叠 获取到的是原div的坐标
         */
        document.querySelector('.Topbox1').getBoundingClientRect().left
        /**
         * 显示文字盒子
        */
        document.querySelector('.tiele').style.display ='block'
        /**
         * 下方目标盒子的左边距
        */
        document.querySelector('.tiele').style.top = document.querySelector('.Topbox1').getBoundingClientRect().top - 40 + 'px'
        console.log(document.querySelector('.Topbox1').getBoundingClientRect().top, '下方目标盒子的上边距');
        /**
         * 下方目标盒子的上边距
        */
        document.querySelector('.tiele').style.left = document.querySelector('.Topbox1').getBoundingClientRect().left
        console.log(document.querySelector('.Topbox1').getBoundingClientRect().left, '下方目标盒子的左边距');
    }
    // 下方盒子的移出事件
    document.querySelector('.Topbox1').onmouseout = ($event) => {
        document.querySelector('.tiele').style.display ='none'
    }
</script>

</html>